<template>
  <div id="examination_id">
    <label class="examination_label"
      >姓名：<input
        class="examination_input"
        type="text"
        placeholder="请输入学生姓名"
        v-model.number="tianjia.name"
    /></label>
    <label class="examination_label"
      >数学：<input
        class="examination_input"
        type="number"
        placeholder="请输入学生语文成绩"
        v-model="tianjia.yuwen"
    /></label>
    <label class="examination_label"
      >语文：<input
        class="examination_input"
        type="number"
        placeholder="请输入学生数学成绩"
        v-model="tianjia.shuxue"
    /></label>
    <button class="examination_tijiao" @click="add">提交</button>
    <table class="examination_table">
      <tr>
        <td>姓名</td>
        <td>语文</td>
        <td>评价</td>
        <td>数学</td>
        <td>评价</td>
        <td>总分</td>
        <td>操作</td>
      </tr>
      <tr
        class="examination_table_neirong"
        v-for="(item, inedx) in list"
        :key="inedx"
      >
        <td>{{ item.name }}</td>
        <td>{{ item.yuwen }}</td>
        <td v-if="item.yuwen >= 90">优秀</td>
        <td v-else-if="item.yuwen >= 70">良好</td>
        <td v-else-if="item.yuwen >= 60">及格</td>
        <td v-else>不及格</td>
        <td>{{ item.shuxue }}</td>
        <td v-if="item.shuxue >= 90">优秀</td>
        <td v-else-if="item.shuxue >= 70">良好</td>
        <td v-else-if="item.shuxue >= 60">及格</td>
        <td v-else>不及格</td>
        <td>{{ item.zongfen }}</td>
        <td @click="del(index)">删除</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tianjia: {
        name: "",
        yuwen: "",
        shuxue: "",
        zongfen: "",
      },
      list: [
        {
          name: "张三",
          yuwen: 80,
          shuxue: 90,
          zongfen: 170,
        },
        {
          name: "李四",
          yuwen: 70,
          shuxue: 30,
          zongfen: 100,
        },
        {
          name: "王五",
          yuwen: 60,
          shuxue: 90,
          zongfen: 150,
        },
      ],
    };
  },
  methods: {
    del(index) {
        this.list.splice(index,1)
    },
    add() {
      if (this.tianjia.name.trim() == "") {
        return alert("提交失败，未检测到姓名");
      } else if (this.tianjia.yuwen.trim() == "") {
        return alert("提交失败，未检测到语文成绩");
      } else if (this.tianjia.shuxue.trim() == "") {
        return alert("提交失败，未检测到数学成绩");
      }
      let obj = {
        name: this.tianjia.name,
        yuwen: this.tianjia.yuwen,
        shuxue: this.tianjia.shuxue,
        zongfen: Number(this.tianjia.yuwen) + Number(this.tianjia.shuxue),
      };
      this.list.unshift(obj);
    },
  },
};
</script>

<style>
.examination_input input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.examination_input input[type="number"] {
  -moz-appearance: textfield;
}
.examination_label {
  margin-left: 100px;
}
.examination_input {
  width: 200px;
  height: 27px;
  padding-left: 10px;
  box-sizing: border-box;
  margin-top: 20px;
}
.examination_tijiao {
  width: 50px;
  height: 27px;
  margin-left: 20px;
  vertical-align: middle;
}
.examination_table {
  background-color: #cccccc;
  text-align: center;
  line-height: 30px;
  margin: 20px auto;
  width: 700px;
}
.examination_table > tr {
  background-color: #eeeeee;
  height: 30px;
}
.examination_table_neirong > td {
  background-color: white;
}
</style>